<div id="elformtimeselect" class="filter-container">
    <el-row :gutter="20">
        <el-col :span="11">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
                <el-form-time-select
                        v-model="ruleForm.time1"
                        prop="time1" label="时间"
                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30'}"
                        placeholder="选择时间"
                        @change="onchange">
                </el-form-time-select>
                <el-form-time-picker
                        v-model="ruleForm.time2"
                        prop="time2"
                        label="时间2"
                        :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
                        placeholder="任意时间点">
                </el-form-time-picker>
                <el-form-time-picker
                        is-range
                        v-model="ruleForm.time3"
                        label="时间3"
                        prop="time3"
                        placeholder="选择时间范围">
                </el-form-time-picker>
                <el-form-date-picker
                        v-model="ruleForm.date1"
                        prop="date1"
                        type="date"
                        placeholder="选择日期"
                        label="日期1"
                        :picker-options="pickerOptions0">
                </el-form-date-picker>
                <el-form-date-picker
                        v-model="ruleForm.date2"
                        prop="date2"
                        label="日期2"
                        type="week"
                        format="yyyy 第 WW 周"
                        placeholder="选择周">
                </el-form-date-picker>
                <el-form-date-picker
                        v-model="ruleForm.date3"
                        prop="date3"
                        label="日期3"
                        type="month"
                        placeholder="选择月">
                </el-form-date-picker>
                <el-form-date-picker
                        v-model="ruleForm.date4"
                        prop="date4"
                        label="日期4"
                        type="year"
                        placeholder="选择年">
                </el-form-date-picker>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <span>{{ruleForm.time1}}</span>
        </el-col>
    </el-row>
</div>

<style>
    .flip-list-move {
        transition: transform 0.5s;
    }

    .no-move {
        transition: transform 0s;
    }

    .ghost {
        opacity: .5;
        background: #C8EBFB;
    }

    .list-group {
        min-height: 20px;
    }

    .list-group-item {
        cursor: move;
    }

    .list-group-item i{
        cursor: pointer;
    }
</style>